<html>
<head>
   <script src="../../Grid/GridE.js"> </script>
</head>
<body class="Tutorial">
   <style>
      /* Tutorial shared styles */
      .Tutorial h1,.Tutorial h2,.Tutorial ul,.Tutorial .Desc,.Tutorial .Path,.Tutorial .Xml { max-height:999999px; }
      .Tutorial h1 { font:30px Arial; padding:5px 0px 5px 0px; margin:0px; text-align:center; }
      .Tutorial h2 { font:15px Arial; padding:0px; margin:0px 0px 10px 0px; text-align:center; color:#757575; }
      .Tutorial h3,.Tutorial h4 { display:inline-block; font:bold 15px Arial; padding:0px 5px 0px 5px; border-radius:2px; color:black; margin:2px; font-style:normal; color:#333; }
      .Tutorial h3 { background:#EE9; border:1px solid #DD8; }
      .Tutorial h4 { background:#BDE; border:1px solid #ACD; }
      .Tutorial a { text-decoration:underline; }      
      .Tutorial li { padding-bottom:8px; }
      .Tutorial ul { margin:6px 0px 0px 20px; font:13px Arial; }
      .Tutorial > ul { margin-left:0px; padding-left:15px; clear:both; }
      .Tutorial ul b { color:#0585B9; }
      .Tutorial .Path { font:normal 12px Arial; color:#0585B9; }
      .Tutorial .Path b { color:#D73938; }
      .Tutorial .Path u { text-decoration:none; color:black; font-weight:bold; padding:0px 2px 0px 2px; }
      .Tutorial .Xml { margin-bottom:6px; font-size:12px; color:#757575; }
      .Tutorial .Border { border:1px solid #dfdfdf; padding:10px 20px 10px 20px; margin:0px 8px 20px 0px; min-width:100%; box-sizing:border-box; }
      .Tutorial .Main { }
   </style>
   <center class="Path"><script>document.write(location.href.replace(/(.*)(\/Tutorials\/)([^\/]+)\/([^\/]+)$/,"$2<b>$3</b>/$4").replace(/([^<]|^)(\/|\.)/g,"$1<u>$2</u>"));</script></center>
   <h1>11. Two fixed levels containers</h1>
   <h2>Run containers fixed in two levels</h2>
   <center class="Border" id="Border">
      <div class="Xml">Source: <a href='11-Run_container_fixed.js'>11-Run_container_fixed.js</a></div>
      <div class="Main" style='width:100%; height:407px;'>
         <bdo Debug='check' Data_Url='11-Run_container_fixed.js'></bdo>
      </div>
   </center>
   <script>
// Generates box text as Text:Pairing.Duty
Grids.OnGetGanttRunText = function(G,row,col,run,idx,txt){
if(run[idx][1]=="milestone") return txt;
return (txt ? txt+":" : "") + (run[idx][15] ? run[idx][15].join(".").replace(/#/g,"") : "?");
}
   </script>
   <ul>
      <li>
         <h4>Example UI</h4><br />
         There are two container levels, the first level <b>Pairing</b>, the second level <b>Duty</b>.
         <br />
         The container can be <b>added</b> from popup menu on right click to the <b>box</b>.
         The container can be <b>removed</b> or boxes in the container can be <b>deleted</b> from popup menu on right click to the <b>container</b>.
         <br />
         <b>Dragging</b> box or container will remove it from its container and place it to new container.
         <br />
         <b>Dragging</b> with <b>shift</b> <b>horizontally</b> preserves the box or container position in parent containers.
         <b>Dragging</b> with <b>shift</b> <b>vertically</b> to another row preserves its horizontal position.
         <br />
         The dragged box or container will be <b>dropped</b> to the <b>hovered</b> container (with red border) or to the container of the hovered box.
         <br />
         <b>Dragging</b> with <b>ctrl</b> will <b>copy</b> the box, selected boxes or container.
         <br />
         <b>Dragging</b> with <b>right</b> mouse button will select area of boxes.
         <b>Dragging</b> with <b>right</b> mouse button in <b>header</b> will select area of boxes in selected or focused rows.
         <br />
         <b>Dragging</b> with <b>shift</b> and <b>right</b> mouse button will move the box or container out of its parent container.<br />
         <b>Dragging</b> with <b>ctrl</b> and <b>right</b> mouse button will copy the box or container without its parent container.
         <br />
         <b>Dragging</b> container <b>edge</b> in the <b>4th</b> row will resize the container.
         <br />
         <b>Ctrl + click</b> deletes the box or container.
         <b>Double click</b> selects or unselects the run box or container. 
         <b>All</b> boxes can be selected or <b>unselected</b> in right click popup menu.<br />
         <i>All actions can be fully customized - assigned to different events.</i><br />
         The <b>box text</b> shows: box identification (one letter), colon, Pairing container with index, dot, Duty container with index. Box not in any container shows question mark.
         Generated by API OnGetGanttRunText.
      </li>
      <li>
         <h4>Container definition</h4><br />
         The containers have no specific definition, they are defined per run box, in <b>15th</b> attribute <b><a href="../../Doc/GanttRun.htm##RunContainers">Container</a></b> of <b>GanttRun</b>. <br />
         The Container attribute can contain more containers, dot separated.
         To have fixed container levels, let the unused container position empty, e.g. Containers:".X...Y".<br />
         The container name consist from two parts, <b>type</b> and <b>id</b>, separated by @, e.g "X@1". For fixed levels containers the type is usually one different per level and id differs the containers on the same level.<br />
         The container name must be unique within one cell. All boxes with the same container name are placed to the same container.<br />
         The container size is always exactly to accommodate all its boxes.<br />
      </li>
      <li>
         <h4>Dragging containers</h4><br />
         Containers can be dragged like single boxes. When the container is dragged, it moves all its boxes (and inner containers).<br />
         How the boxes and containers are dropped to destination container or empty place is controlled by <b><a href="../../Doc/GanttRun.htm#CGanttRunAdjust">GanttRunAdjust</a></b> attribute.<br />
         Add flag "<b>Containers</b>" to the GanttRunAdjust to control the containers when the box is dropped. If the flag "<b>Containers</b>" is <u>not</u> set, the boxes and containers are dropped unchanged, with their actual Containers value.<br />
         For fixed level containers add also "<b>ContainersLevels</b>" and "<b>ContainersUnique</b>" to GanttRunAdjust to preserve the nesting levels and make the container unique when dropping.<br />
         Possibly add also "<b>ContainersMerge</b>" to GanttRunAdjust to merge containers on the same or higher levels to make the dropping more easy.<br />
         Possibly add also "<b>ContainersDelete</b>" to GanttRunAdjust to delete original containers when dropped to lower container levels or empty place. <i>It is <u>not</u> set in this sample.</i><br />
         The containers can be copied by dragging similarly to copying boxes by adding "<b>Copy</b>" to <b>GanttRunMove</b> instead of "Move" or "Slide".<br />
      </li>
      <li>
         <h4>Adding, deleting and disabling containers</h4><br />
         The containers can be controlled in three ways: from right click popup menu, by single actions or by API.<br />
         For fixed level containers define containers <b>GanttRunContainers</b> (for adding and changing container) with assigned levels to the container names (by dot), to be added or changed only on assigned level.<br />
         <ul>
         <li>
            In popup menu on <b>box</b> there are items to control the <b>container</b>: <b>AddGanttRunContainer</b> (adds new container to the box).<br />
            In popup menu on <b>container</b> there are items to control <b>the container</b>: <b>DelGanttRunContainerOnly</b> (delete the container only, remove it from its boxes Containers attribute), <b>ChooseGanttRunContainer</b> (change container type).<br />
            In popup menu on <b>container</b> there are items to control <b>boxes</b> in the container: <b>DelGanttRunContainer</b> (delete all boxes in the container and the container itself), <b>ChooseGanttRunContainerType</b> (change all boxes in container), 
            <b>DisableGanttRunContainer</b> (disable all boxes in container), <b>LockGanttRunContainer</b> (lock all boxes), <b>EnableGanttRunContainer</b> (enable all boxes).<br />
         </li>
         <li>
            Actions for container: <b>DeleteGanttRunContainerOnly</b> (delete the container only, remove it from its boxes Containers attribute),
            <b>DeleteGanttRunContainer</b> (delete all boxes and the container itself), <b>ChooseGanttRunContainer</b> (change container type).<br />
            Actions for box: <b>AddGanttRunContainer</b> (adds new container to the box).<br />
         </li>
         <li>
            API for adding, changing, deleting and disabling containers is described in <a href="../../Doc/GanttRun.htm#Container">documentation</a>. It contains also API to get all actual containers.<br />
         </li>
         </ul>
      </li>
      <li>
         <h4>Resizing containers and empty space around</h4><br />
         The containers can define their edges different from their edge boxes by hidden box of Type <b>Edge</b>. The Edge type box can be only on container edge and must not be joined to another box.<br />
         If the container has <b>Edge</b> type box on its edge or if set <b><a href="../../Doc/GanttRun.htm#CGanttRunContainersResize">GanttRunContainersResize</a></b>='<b>2</b>' it can be resized by mouse dragging. 
         Its size can be freely increased and it can be decreased to the first box on the edge.<br />
         If the container has <b>Edge</b> type boxes on its edges, it can be also empty without any other boxes, except if set <b><a href="../../Doc/GanttRun.htm#CGanttRunContainersDelete">GanttRunContainersDelete</a></b>='<b>3</b>'.<br />
      </li>
   </ul>

   <!-- Google Analytics code run once for trial -->
   <script>
      var TGTrial = document.cookie.match(/TGTrialRun\s*=\s*(\d+)/), TGIndex = 1024;
      if(!TGTrial||!(TGTrial[1]&TGIndex)) setTimeout(function(){
         var n = "RunTrialGridRun11", d = (new Date((new Date).getTime()+31536000000)).toUTCString(); document.cookie = "TGTrialRun="+((TGTrial?TGTrial[1]:0)|TGIndex)+";expires="+d;
         var u = document.cookie.match(/TGTrialUsed\s*=\s*(\d+)/); u = u ? u[1]-0+1 : 1; if(u<=11) document.cookie = "TGTrialUsed="+u+";path=/;expires="+d;
         var s = "<div style='width:0px;height:0px;overflow:hidden;'><iframe src='http"+(document.location.protocol=="https"?"s":"")+"://www.treegrid.com/Stat/GA.html?productName="
               +(u==1||u==3||u==5||u==10?"UsedTrial"+u:n)+"' onload='var T=this;setTimeout(function(){document.body.removeChild(T.parentNode.parentNode);},1000);'/></div>";
         var F = document.createElement("div"); F.innerHTML = s; document.body.appendChild(F);
         },100);
   </script>
</body>
</html>